<template>
  <div>
    <div style="margin-top: 2%;text-align:center;">
      <el-button @click="returnPage()" style="font-size: 20px;margin-right: 12%" type="primary">返回</el-button>
      <span style="font-size:22px;">教学安排名称: </span>
      <span style="font-size:24px;font-weight: bold;color:#409eff;margin-right: 12%">{{teachTask.teachName}}</span>
      <el-button @click="addSubProject()" style="font-size: 20px;" type="primary">点击此处新增子成绩项目</el-button>
    </div>
    <div style="margin-top: 1%;"/>
    <template>
      <el-table :data="pageInfo.list" style="width: 100%">
        <el-table-column label="" width="240">
        </el-table-column>
        <el-table-column label="名称" width="600" prop="subProjectId" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.subName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目类型" width="420">
          <template slot-scope="scope">
            <div v-for="item in subType" :key="item.subTypeId">
              <span v-if="item.subTypeId === scope.row.subTypeId">{{item.subTypeName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="primary" style="font-size: 16px"
                       @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="primary" style="font-size: 16px"
                       @click="intoSubProject(scope.row)">进入项目</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 1%;"/>
      <el-pagination
          style="text-align: center;"
          background
          layout="total,prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          @current-change="handleCurrentChange">
      </el-pagination>
    </template>
    <el-drawer title="编辑项目" :visible.sync="dialogForm" :direction="modifyDirection">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30%">
        <el-form-item label="项目名称" prop="subName">
          <el-input v-model="ruleForm.subName" placeholder="请输入项目名称" style="width: 40%"></el-input>
        </el-form-item>
        <el-form-item label="选择类型" prop="subTypeId">
          <el-select v-model="ruleForm.subTypeId"
                     style="width: 20%"
                     clearable filterable
                     placeholder="请选择类型">
            <el-option v-for="item in subType" :key="item.subTypeId"
                       :label="item.subTypeName"
                       :value="item.subTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dialogForm: false,
      modifyDirection: 'btt',
      teachTask:{},
      form:{
        teachId: '',
      },
      currPage: 1,
      pageInfo:{},
      subType:[],
      ruleForm:{
        subProjectId:'',
        teachId: '',
        subName: '',
        subTypeId: '',
      },
      rules: {
        subName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
          { min: 2, max: 50, message: '请输入 2 到 50 个字符!', trigger: 'blur' }
        ],
        subTypeId: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.form.teachId = this.$route.params.teachId;
    this.taskInit();
    this.getSubType();
  },
  methods:{
    submitForm(formName){ // 新增/修改项目
      this.$refs[formName].validate((valid) => {//校验格式
        if (valid) {//格式校验通过
          let path = 'http://localhost:8081/subScore/updateSubProject';
          this.$ajax.post(path,this.ruleForm).then(res=>{
            if(res.data.status === 0){
              this.$message.success(res.data.message);
              this.dialogForm = false;
              this.getData();
            }
          })
        }
      });
    },
    intoSubProject(row){//进入项目
      this.$router.push(`/teacher/subScoreMGMT/${row.subProjectId}`);
    },
    addSubProject(){//新增
      this.ruleForm.subProjectId = null;
      this.ruleForm.teachId = this.form.teachId;
      this.ruleForm.subName = '';
      this.ruleForm.subTypeId = '';
      this.dialogForm = true;
    },
    handleEdit(row){//编辑
      this.ruleForm.subProjectId = row.subProjectId;
      this.ruleForm.teachId = row.teachId;
      this.ruleForm.subName = row.subName;
      this.ruleForm.subTypeId = row.subTypeId;
      this.dialogForm = true;
    },
    getData(){//获取数据
      let path = `http://localhost:8081/subScore/getSubProject/${this.currPage}`;
      this.$ajax.post(path,this.form).then(res=>{
        this.pageInfo = res.data;
      })
    },
    taskInit(){//教学安排初始化
      let path = 'http://localhost:8081/teach/getTeachTasks/1';
      this.$ajax.post(path,this.form).then(res=>{
        let result = res.data.list[0];
        if(res.data.list.length === 1 && parseInt(result.teachState) === 1){
          this.teachTask = result;
          this.getData();
        }
        else{
          alert("教学安排不存在或没有权限!");
          this.$router.push('/teacher/teachTaskMGMT');
        }
      })
    },
    getSubType(){//获取类型
      let path = 'http://localhost:8081/subScore/getAllSubType';
      this.$ajax.post(path).then(res=>{
        this.subType = res.data.list;
      })
    },
    handleCurrentChange(val){//翻页
      this.currPage = val;
      this.getData();
    },
    returnPage(){//返回
      this.$router.push(`/teacher/uploadGrades/${this.form.teachId}`);
    },
  }
}
</script>

<style scoped>
span{
  font-size: 18px;
}
</style>